<template>
    <div class="" id="facStatistics">
        <el-row style="padding-top:20px;">
          <el-col :span="12" :offset="8">
            <el-form :inline="true" :model="facQuery" class="demo-form-inline">
              <el-form-item label="年份">
                <el-input v-model="facQuery.year" placeholder="年份"></el-input>
              </el-form-item>
             
              <el-form-item>
                <el-button v-preventReClick type="primary" @click="queryFacNumber(facQuery)">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row class="echarts">
            <el-col :span="10" :offset="1">
                <div id="pie" style=""></div>
            </el-col>
            <el-col :span="12" :offset="1">
                <div id="brokenLine" style=""></div>
                
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import {queryFacNumber} from '@/api/facility/facility'
import { disposeDict } from '@/utils/dicts'

export default {
    data() {
      return{
        facQuery:{},
        pieData:[],
        listFacType:disposeDict('facType','arr'),
        objFacType:disposeDict('facType','obj'),
        lineData:[0,0,0,0,0,0,0,0,0,0,0,0]
      }  
    },
    created(){
      this.queryFacNumber()
     
      console.log(this.listFacType)
    },
    mounted(){
      
    },
    methods:{
      init(){
        let echarts = require('echarts')
        let pie=echarts.init(document.getElementById('pie'))
        let line=echarts.init(document.getElementById('brokenLine'))

        let pieOption={
  title: {
    text: '各类型设备故障比',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
      formatter:'{b}  : {c} ({d}%)' ,

  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '占比图',
      type: 'pie',
      radius: '50%',
      data: this.pieData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
pie.setOption(pieOption)
  let lineOption={
    title: {
    text: '各月份设备故障情况',
    subtext: '',
    left: 'center'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap:false,
    data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data:this.lineData,
      type: 'line',
      itemStyle: { normal: {label : {show: true,fontSize:16}}},
      symbolSize:8
    }
  ]
};
line.setOption(lineOption)
pie.on('click',function(params){
  lineOption.series[0].data=params.data.month
  line.setOption(lineOption)

})
      },
      queryFacNumber(data){
        this.pieData=[]
        for (let i = 0; i < this.listFacType.length; i++) {
          
          queryFacNumber({year:this.facQuery.year?this.facQuery.year:'2022',deviceType:this.listFacType[i].dict_key}).then(res=>{
            let arr=Object.values(res.data[0])
            let count=0
            arr.forEach(i=>{
              count+=i
            })
            let obj={value:count,name:this.objFacType[this.listFacType[i].dict_key],month:arr}
                  this.pieData.push(obj)
              this.init()
              
          })
          
        }
        queryFacNumber(data).then(res=>{
              this.lineData=Object.values(res.data[0])
              this.init()

        })
        console.log(this.pieData)
      }
      }

}
</script>
<style lang='scss' scoped>
#facStatistics{
  
    height: calc(100vh - 50px);
    .echarts{
      height: 60vh;
      // height: 100%;
      div{
        height: 100%;
      }
    }
    
}
</style>